<template>
  <div class="app-container addTestQuestionsClass" v-loading="loading">
    <el-form ref="formRef" :model="formParams" :rules="rules" :inline="true">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item prop="testPaperName" label="试卷名称：">
            {{ testPaperName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="group" label="比赛组别："
            >{{ group }}
          </el-form-item>
        </el-col>
        <el-col :span="24" class="questionContentClass">
          <el-form-item prop="questionContent" label="题目内容：">
            <el-input
              v-model="formParams.questionContent"
              clearable
              type="textarea"
              :rows="3"
              maxlength="400"
              show-word-limit
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item prop="questionType" label="题目类型：">
            <el-radio-group
              v-model="formParams.questionType"
              @change="questionTypeChange"
              :disabled="disabled"
            >
              <el-radio
                v-for="item in options"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="answer"
            label="题目答案："
            v-if="formParams.questionType === 1"
          >
            <el-radio-group v-model="formParams.answer" :disabled="disabled">
              <el-radio
                v-for="item in answerOptions"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="multiAnswer"
            label="题目答案："
            v-if="formParams.questionType === 2"
          >
            <el-checkbox-group
              v-model="formParams.multiAnswer"
              :disabled="disabled"
            >
              <el-checkbox
                v-for="item in answerOptions"
                :key="item.value"
                :value="item.value"
                name="type"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            prop="answer"
            label="题目答案："
            v-if="formParams.questionType === 3"
          >
            <el-radio-group v-model="formParams.answer" :disabled="disabled">
              <el-radio
                v-for="item in judgeOptions"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="optionA" label="选项A：">
            <el-input
              :disabled="disabled"
              v-model="formParams.optionA"
              clearable
              type="textarea"
              :rows="2"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="optionB" label="选项B：">
            <el-input
              :disabled="disabled"
              v-model="formParams.optionB"
              clearable
              type="textarea"
              :rows="2"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="optionC" label="选项C：">
            <el-input
              :disabled="disabled"
              v-model="formParams.optionC"
              clearable
              type="textarea"
              :rows="2"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="optionD" label="选项D：">
            <el-input
              :disabled="disabled"
              v-model="formParams.optionD"
              clearable
              type="textarea"
              :rows="2"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="questionContentClass">
          <el-form-item prop="analysis" label="试题解析：">
            <el-input
              :disabled="disabled"
              v-model="formParams.analysis"
              clearable
              type="textarea"
              :rows="2"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-col>

        <!-- <el-col :span="12">
            <el-form-item prop="optionE" label="选项E">
              <el-input
                v-model="formParams.optionE"
                clearable
                type="textarea"
                :rows="2"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="optionF" label="选项F">
              <el-input
                v-model="formParams.optionF"
                clearable
                type="textarea"
                :rows="2"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col> -->
        <el-col :span="12" prop="questionFile" class="uploadFileClass">
          <el-form-item label="题目附件：">
            <Custom-Upload
              :disabled="disabled"
              @set-file="setFile"
              @delete-file="deleteFile"
              :url="formParams.questionFile"
              :name="fileName"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="btnWarp">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="disabled"
          >保 存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ItemPageVO2, Options } from "@/api/examPaperManagement/types";
import { questionCreate, questionUpdate } from "@/api/examPaperManagement";

const props = defineProps({
  itemObj: {
    type: Object,
    required: true,
    default: () => {
      return {};
    },
  },
  testPaperName: {
    type: [String],
    required: true,
    default: "",
  },
  group: {
    type: String,
    required: true,
    default: "",
  },
  paperId: {
    type: [String, Number],
    required: true,
    default: "",
  },
  disabled: {
    type: [Boolean],
    required: true,
    default: false,
  },
});

const emit = defineEmits(["close", "submit"]);
const formRef = ref(ElForm);

const options = ref<Options[]>([]);
const answerOptions = ref<Options[]>([]);
const judgeOptions = ref<Options[]>([]);
const loading = ref(false);
const questionFile = ref<any>(null);
const fileName = ref<any>("");
// const rules = reactive({
//   questionType: [{ required: true, message: " ", trigger: "change" }],
//   questionContent: [{ required: true, message: " ", trigger: "change" }],
//   answer: [{ required: true, message: " ", trigger: "change" }],
//   multiAnswer: [{ required: true, message: " ", trigger: "change" }],
//   optionA: [{ required: true, message: " ", trigger: "change" }],
//   optionB: [{ required: true, message: " ", trigger: "change" }],
// });

const rules = computed(() =>
  reactive({
    questionType: [{ required: true, message: " ", trigger: "change" }],
    questionContent: [{ required: true, message: " ", trigger: "change" }],
    answer: [{ required: true, message: " ", trigger: "change" }],
    multiAnswer: [{ required: true, message: " ", trigger: "change" }],
    optionA: [
      {
        required: true,
        message: " ",
        trigger: "change",
      },
    ],
    optionB: [
      {
        required: true,
        message: " ",
        trigger: "change",
      },
    ],
    optionC: [
      {
        required: formParams.questionType !== 3,
        message: " ",
        trigger: "change",
      },
    ],
    optionD: [
      {
        required: formParams.questionType !== 3,
        message: " ",
        trigger: "change",
      },
    ],
  })
);

// 题目类型
options.value = [
  {
    label: "单选题",
    value: 1,
  },
  {
    label: "多选题",
    value: 2,
  },
  {
    label: "判断题",
    value: 3,
  },
];
// 答案
answerOptions.value = [
  {
    label: "A",
    value: "A",
  },
  {
    label: "B",
    value: "B",
  },
  {
    label: "C",
    value: "C",
  },
  {
    label: "D",
    value: "D",
  },
  // {
  //   label: "E",
  //   value: "E",
  // },
  // {
  //   label: "F",
  //   value: "F",
  // },
];
// 答案
judgeOptions.value = [
  {
    label: "对",
    value: "A",
  },
  {
    label: "错",
    value: "B",
  },
];

const formParams = reactive<ItemPageVO2>({
  answer: "A",
});

watch(
  props.itemObj,
  (data) => {
    if (data) {
      const { subject } = data;
      if (data.id) {
        formParams.id = data.id;
        formParams.paperId = "";
        formParams.answer = data.answer;
      } else {
        formParams.id = "";
        formParams.paperId = props.paperId;
        formParams.answer = "A";
      }

      formParams.questionType = data.questionType;
      formParams.questionContent = data.questionContent;
      formParams.optionA = data.optionA;
      formParams.optionB = data.optionB;
      formParams.optionC = data.optionC;
      formParams.optionD = data.optionD;
      formParams.analysis = data.analysis;
      // formParams.optionE = data.optionE;
      // formParams.optionF = data.optionF;
      formParams.questionFile = data.questionFile;
      if (data.questionType === 2) {
        formParams.multiAnswer = data.answer.split("");
      }
      if (data.questionFile) {
        fileName.value = data.questionFile.split("photo/")[1];
      } else {
        fileName.value = "";
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
function onSubmit() {
  formRef.value.validate((valid: boolean) => {
    let params: any = {};
    Object.assign(params, formParams);
    if (params.questionType === 2) {
      params.answer = params.multiAnswer.join("");
    }
    if (!params.answer) {
      return ElMessage.error("请选择题目答案");
    }
    if (valid) {
      delete params.multiAnswer;
      delete params.questionFile;

      let formData = new FormData();

      for (const key in params) {
        if (params[key] !== null) {
          formData.append(key, params[key]);
        }
      }
      // formData.append("file", questionFile.value);

      if (questionFile.value) {
        formData.append("questionFile", questionFile.value);
        formData.delete("delFile");
        // formData.delFile = 1;
      }
      loading.value = true;
      if (params.id) {
        questionUpdate(formData)
          .then((res) => {
            ElMessage.success("修改成功");
            emit("submit");
            closeFn();
          })
          .catch((err) => {
            loading.value = false;
            console.error(err);
          });
      } else {
        questionCreate(formData)
          .then((res) => {
            ElMessage.success("新增成功");
            emit("submit");
            closeFn();
          })
          .catch((err) => {
            loading.value = false;
            console.error(err);
          });
      }
    }
  });
}
function questionTypeChange(data: any) {
  console.log("dddddddddddddddd", data);
  if (data === 1 || data === 3) {
    formParams.answer = "A";
  } else {
    formParams.multiAnswer = ["A"];
  }
}
function closeFn() {
  emit("close");
  loading.value = false;
}
function setFile(data: any) {
  questionFile.value = data;
}
function deleteFile() {
  formParams.delFile = 1;
}

onMounted(() => {});
</script>
<style lang="scss" scoped>
.addTestQuestionsClass {
  padding: 0;
  .el-card {
    border: 0;
    margin: 0;
  }
}
:deep(.el-form-item--default .el-form-item__label) {
  min-width: 84px;
}
.app-container :deep(.el-form-item__label) {
  width: 120px;
}
:deep(.el-form-item__content) {
  width: 348px;
}
.questionContentClass :deep(.el-form-item__content) {
  width: 85.3%;
}
.btnWarp {
  position: absolute;
  bottom: 2px;
  left: 50%;
  margin-left: -70px;
}
.btnWarp :deep(.el-form-item__content) {
  width: 100%;
}
</style>
